<template>
  <div class="pfofile">
    <div class="baseCard">
      <el-row :gutter="20">
        <DateSelect class="pull-right" @getTime="getTime"></DateSelect>
        <CasCader :options="provinceAndCityDataPlus" class="pull-left" @getOption="getProvinceName"></CasCader>
      </el-row>
      <el-row :gutter="20" class="echartRow">
        <el-col :span="24" style="padding:0px">
          <el-card id="card" v-loading="loading">
            <CasCader size="small" :options="dataSelectOptions" class="pull-left dataSelect" @getOption="getDataIndex">
            </CasCader>
            <v-chart v-if="echartData[0] && echartData[0].length>0" style="width:100%;margin-top:60px"
              :options="echartOption">
            </v-chart>
            <div v-else-if="echartData[0] && echartData[0].length===0" class="nodata"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// 导入vue-echarts插件
import ECharts from 'vue-echarts/components/ECharts'
// 按需导入echarts的图形类型
import 'echarts/lib/chart/radar'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/pie'
// 导入工具部分
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title';
// register component to use
import 'echarts/lib/component/legendScroll';
// register component to use
import 'echarts/lib/component/dataZoom';
import 'echarts/lib/component/markPoint';
import 'echarts/lib/component/markLine';
import 'echarts/lib/component/markArea';
import 'echarts/lib/component/dataZoom';

import { provinceAndCityDataPlus, CodeToText } from 'element-china-area-data'
import DateSelect from '../components/DateSelect'
import CasCader from '../components/CasCader'
import {
  axiosUtil
} from "../network/axiosUtil"
import formatTime from '../utils/formatTime'
export default {
  name: "Profile",
  data () {
    return {
      provinceAndCityDataPlus: provinceAndCityDataPlus,
      startTime: '',
      endTime: '',
      provinceName: '',
      dataSelectOptions: [{ label: '累计确诊', value: 0, dataSelect: 'confirmedCount' }, { label: '现存确诊', value: 1, dataSelect: 'currentConfirmedCount' }, { label: '境外输入', value: 2, dataSelect: 'suspectedCount' }, { label: '无症状感染', value: 3, dataSelect: 'seriousCount' }, { label: '治愈', value: 4, dataSelect: 'curedCount' }, { label: '死亡', value: 5, dataSelect: 'deadCount' }],
      dataIndex: 0,
      echartData: [],
      dateList: [],
      loading: true,
      customColors: ['#f56c6c', '#e6a23c', '#6f7ad3', '#1989fa', '#67C23A', '#ff0000'],
    }
  },
  computed: {
    echartOption () {
      return {
        legend: {
          data: [this.dataSelectOptions[this.dataIndex].label],
          textStyle: {//图例文字的样式
            color: this.customColors[this.dataIndex],
            fontSize: 14,
            fontWeight: 600
          }
        },
        color: this.customColors[this.dataIndex],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          nameLocation: 'middle',
          data: this.dateList
        },
        yAxis: {
          type: 'value',
          name: '总数',
          splitLine: {
            show: false
          }
        },
        series: [{
          name: this.dataSelectOptions[this.dataIndex].label,
          data: this.echartData[this.dataIndex],
          type: 'line',
          symbol: 'none',
          smooth: true,
          lineStyle: {
            color: this.customColors[this.dataIndex],
            width: 2
          }
        }
        ]
      }
    }
  },
  methods: {
    getTime (time) {
      this.startTime = formatTime(time[0], "yyyyMMdd")
      this.endTime = formatTime(time[1], "yyyyMMdd")
      this.loading = true
      this.getData()
    },
    getProvinceName (value) {
      value = CodeToText[value];
      if (value && value.length > 2 && value.length < 5) {
        this.provinceName = value.substring(0, value.length - 1)
      } else if (value.length > 4) {
        if (value == '内蒙古自治区') {
          this.provinceName = value.substring(0, 3)
        } else {
          this.provinceName = value.substring(0, 2)
        }
      } else {
        this.provinceName = value
      }
      this.loading = true
      this.getData()
    },
    getDataIndex (value) {
      this.dataIndex = value
    },
    getData () {
      this.echartData = []
      if (this.provinceName == '' || this.provinceName == '全部') {
        axiosUtil({
          url: '/getDailyData',
          method: 'get',
          params: {
            startTime: this.startTime,
            endTime: this.endTime,
          }
        }).then(data => {
          if (data) {
            //代表请求数据成功
            // this.echartData = data
            this.dateList = data.map(item => {
              return item.dateId
            })
            for (let i = 0; i < 6; i++) {
              this.echartData.push(data.map(item => {
                return item[this.dataSelectOptions[i].dataSelect]
              }))
            }
          }
          this.loading = false
        })
      } else {
        axiosUtil({
          url: '/getProvincesDailyByTime',
          method: 'get',
          params: {
            provinceName: this.provinceName,
            startTime: this.startTime,
            endTime: this.endTime,
          }
        }).then(data => {
          if (data) {
            //代表请求数据成功
            this.dateList = data.map(item => {
              return item.dateId
            })
            for (let i = 0; i < 6; i++) {
              this.echartData.push(data.map(item => {
                return item[this.dataSelectOptions[i].dataSelect]
              }))
            }
          }
          this.loading = false
        })
      }
    },

  },
  components: {
    "v-chart": ECharts,
    axiosUtil,
    DateSelect,
    CasCader
  }
}
</script>

<style scoped>
.echartRow {
  margin: 20px;
}

.echartRow .el-col {
  padding: 0px;
}

.dataSelect {
  position: relative;
  z-index: 10;
}
</style>>